<template>
  <div>
    <div class="search-content">
      <div class="putaway-time-wrapper">
        <span class="putaway-time-label">下单时间：</span>
        <el-date-picker
          v-model="searchContent.addTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          clearable 
        >
        </el-date-picker>
      </div>
      <div class="putaway-time-wrapper">
        <span class="putaway-time-label">品牌：</span>
        <el-select v-model="searchContent.brand" multiple collapse-tags clearable filterable>
            <el-option v-for="item in brand" :key="item.category_id" :value="item.category_id" :label="item.brand_name"></el-option>
        </el-select>
      </div>
      <div class="putaway-time-wrapper">
        <span class="putaway-time-label">商品分类：</span>
         <el-cascader
            v-model="searchContent.category"
            :options="category_options"
            :props="props"
            filterable
            clearable
            ref="areaCascader"
            @change="changeCascader()"
            ></el-cascader>
      </div>
      <div class="putaway-time-wrapper">
        <span class="putaway-time-label">状态：</span>
        <el-select v-model="searchContent.status" multiple collapse-tags clearable>
            <el-option v-for="item in status" :key="item.value" :value="item.value" :label="item.label"></el-option>
        </el-select>
      </div>
      <el-button type="primary" @click="getList" style="margin-left: 10px">搜索</el-button>
      <el-button type="primary" @click="resetSearchData">重置</el-button>
    </div>
    <div class="search-list">
        <h3 class="table_tit">商品分类：<span>{{ categoryName1 }}</span></h3>
        <el-table
            :data="list"
            border
            height="calc(100vh - 16rem)"
            style="width: 100%">
            <el-table-column prop="brand_name" align="center" label="品牌" ></el-table-column>
            <el-table-column prop="totalNum" align="center" label="订单总量" ></el-table-column>
            <el-table-column prop="point_pointnum" align="center" label="积分支付总额">
                <template slot-scope="scope">
                    <span>{{ scope.row.point_pointnum / 100}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="point_paynum" align="center" label="现金支付总额" ></el-table-column>
            <el-table-column prop="point_comprice_all" align="center" label="协议价总额" ></el-table-column>
        </el-table>
        <div class="paging">
            <el-button type="primary" size="mini" @click="exportFile">导出</el-button>
             <!-- <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
            </el-pagination> -->
        </div>
    </div>
  </div>
</template>
<script>
import { resize } from "@/common/js/height.js";
export default {
  data() {
    return {
      options: [],
        oHeight: 800,
        brand: [],  // 品牌
        category_options: [],//分类
        categoryName: "",
        categoryName1: "",
        props: {
            checkStrictly:true,
            value: "category_id",
            label: "category_name",
            children:"child"
        },
        status: [
            {value: '40', label: "已完成"},
            {value: '20', label: "已支付"},
            {value: '30,60', label: "已发货"},
        ],
        searchContent: {
            addTime: [],
            brand: [],
            category:"",
            status:[],
            
        },
          list: [],
    };
  },
  created() {
    this.brandList();
  },

  methods: {
      brandList() {
        let now = new Date();
        let targetday = new Date(now.getTime() - 1000 * 60 * 60 * 24 * 30);
        this.searchContent.addTime = [String(targetday), String(now)]
        this.$http.get('admin/pointprod/index.php?act=pointBrand&op=list', {
                params:{page:1,size:999999}
            }).then(res => {
                if (res.code === 1) {
                    this.brand = res.data.list
                }
            }).catch(err => {
                this._message('error', err);
            })
        this.$http.get(`/admin/pointprod/index.php?act=pointCategory&op=listTree`).then(res => {
            if (res.code === 1) {
                function recursionArr(arr) {
                    arr.map(v => {
                        if (v.child && v.child.length == 0) {
                            v.child = null
                        } else {
                            recursionArr(v.child)
                        }
                        
                    })
                    return arr
                }
                this.category_options = recursionArr(res.data)
                } else {
                    this._message('error', err);
                }

            }).catch(err => {
                this._message('error', err);
            })

            this.getList();
      },
      getList() {
          let data = {};
          data.start_time = new Date(this.searchContent.addTime[0]).getTime() / 1000;
          data.end_time = new Date(this.searchContent.addTime[1]).getTime() / 1000;
          // 品牌
          if (this.searchContent.brand.length > 0) {
            let pgoods_brand = ""
            this.searchContent.brand.map(v => {
                pgoods_brand += v + ','
            })
            data.pgoods_brand = pgoods_brand.slice(0,-1)
          }
          //分类
          if (this.searchContent.category != "") data.category_id = this.searchContent.category[this.searchContent.category.length - 1];
          //状态
           if (this.searchContent.status.length > 0) {
            let point_orderstate = ""
            this.searchContent.status.map(v => {
                point_orderstate += v + ','
            })
            data.point_orderstate = point_orderstate.slice(0,-1)
          }
            this.$http.get(`/admin/store/index.php?act=storeStatics&op=pointGoodsStatics`,{params:data}).then(res => {
                if (res.code === 1) {
                    this.categoryName1 = this.categoryName;
                    this.list = res.data;
                } else {
                    this._message('error', err);
                }

            }).catch(err => {
                this._message('error', err);
            })
      },
      resetSearchData() {
        let now = new Date();
        let targetday = new Date(now.getTime() - 1000 * 60 * 60 * 24 * 30);
        this.searchContent.addTime = [String(targetday), String(now)];
        this.searchContent.brand = [];
        this.searchContent.category = "";
          this.searchContent.status = [];
          this.categoryName = "";
        this.getList()
      },
      changeCascader() {
          this.categoryName = this.$refs['areaCascader'].getCheckedNodes()[0].label;
      },
      exportFile() {
           let data = {};
          data.start_time = new Date(this.searchContent.addTime[0]).getTime() / 1000;
          data.end_time = new Date(this.searchContent.addTime[1]).getTime() / 1000;
          // 品牌
          if (this.searchContent.brand.length > 0) {
            let pgoods_brand = ""
            this.searchContent.brand.map(v => {
                pgoods_brand += v + ','
            })
            data.pgoods_brand = pgoods_brand.slice(0,-1)
          }
          //分类
          if (this.searchContent.category != "") data.category_id = this.searchContent.category[this.searchContent.category.length - 1];
          //状态
           if (this.searchContent.status.length > 0) {
            let point_orderstate = ""
            this.searchContent.status.map(v => {
                point_orderstate += v + ','
            })
            data.point_orderstate = point_orderstate.slice(0,-1)
          }
         var host;
      if (this.$store.state.isServer) {
        host = location.host.replace("admin", "api");
      } else {
        host = location.host + "/api";
      }
      var url =
        location.protocol +
        "//" +
        host +
        "/admin/store/index.php?act=storeStatics&op=pointGoodsStatics&exportData=1";
      for (var key in data) {
        if (
          !(
            data[key] === null ||
            data[key] === "" ||
            data[key] === undefined
          )
        ) {
          url += "&" + key + "=" + data[key];
        }
      }
      window.location.href = url;
    },
  },
  mounted() {
    resize(this);
  },
};
</script>
<style lang="scss" scoped>
.search-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  &-input {
    width: 200px;
  }
 
  .putaway-time-wrapper {
    .putaway-time-label {
      font-size: 14px;
    }
    display: flex;
    align-items: center;
    /deep/.el-range-separator {
      box-sizing: content-box;
    }
  }
}
.table_tit{
    margin-bottom: 10px;
    span{
        color: #54a7e1;
    }
}
.paging{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 10px;
}
</style>